<template>
<div class="ba">
  <div class="ba-title">
    <span v-show="isBest">{{Best}}</span>
    <span v-show="isGreat">{{Great}}</span>
  </div>
  <small-head :show="show" :isContent="false"></small-head>
  <div class="ba-words">
    {{question.words}}
    <div>
      <img
        v-for="item in question.wordImg"
        :key="item.id"
        :src="item.url">
    </div>
  </div>
  <div class="ba-last">
    <div class="ba-left">
      <span>
        <i class="el-icon-s-opportunity"></i>
        靠谱：{{question.good}}</span>
      <span>
        <i class="el-icon-s-comment"></i>
        评论：{{question.commit}}条</span>
    </div>
    <div class="ba-right">
      <span>{{question.times}}小时前</span>
    </div>
  </div>
</div>
</template>

<script>
import smallHead from './smallHead.vue'
export default {
  props: ['isBest',
    'isGreat',
    'show'],
  data () {
    return {
      Best: '⭐最佳回答',
      Great: '优质回答',
      question: {
        // 此数据后端处理应有最大值
        words: '“Activity缩写，指技能开发活动，是一个非常有用的工具。通过它可将实际成绩和目标之间的距离逐步缩短，从而使目标达成。 简介 SDA （Skill Development Activity)',
        wordImg: [
          {
            id: 1,
            url: require('@/assets/images/question/cloth1.jpg')
          },
          {
            id: 2,
            url: require('@/assets/images/question/cloth1.jpg')
          },
          {
            id: 3,
            url: require('@/assets/images/question/cloth1.jpg')
          }
        ],
        good: 165,
        commit: 30,
        // 初步设想，获取问题提交后端时间并返回，当前时间减去提交时间取整
        // 暂未实现
        times: 2
      }
    }
  },
  computed: {
    // show () {
    //   let trueNeed
    //   let temp = [this.show1, this.show2, this.show3, this.show4, this.show5]
    //   temp.forEach((item, index) => {
    //     if (item != null) {
    //       console.log(item)
    //       trueNeed = item
    //     } else {
    //       item = 'null'
    //     }
    //   })
    //   console.log(trueNeed)
    //   return trueNeed
    // }
  },
  watch: {
  },
  components: {
    smallHead
  }
}
</script>

<style lang='scss'>
.ba-title {
  margin: 15px 0 0 30px;
  font-weight: bolder;
  font-size: 16px;
  font-family: 微软雅黑;
  color: #E9BD7A;
  letter-spacing: 1px;

}
.ba-table {
    // border: 1px solid red;
    // tr {
    //     border: 1px solid red;
    //     td {
    //         border: 1px solid red;
    //     }
    // }
    margin-top: -20px;
    width: 100%;
    height: auto;
    font-size: 14px;
    font-family: 微软雅黑;
    font-weight: bold;
    .timg {
        width: 15%;
        text-align: center;
        padding-top: 20px;
    }
    .tname {
        height: 30px;
        vertical-align: middle;
        padding-top: 10px;
        font-size: 16px;
    }
    .tsub {
        width: 35%;
        padding-bottom: 20px;
        font-size: 12px;
        font-size: normal;
        color: DarkKhaki;
        span {
            font-weight: bold;
        }
    }
    .ticon {
        width: 20px;
        height: auto;
        padding-top: 30px;
        margin-left: 20px;
    }
    .ttitle {
        padding-bottom: 20px;
        width: 10%;
    }
    .tcloth {
        width: 15%;
        padding-top: 10px;
        height: auto;
    }
    .tplus {
        text-align: center;
        font-weight: bold;
        padding-bottom: 20px;
        vertical-align: bottom;
    }
}
.ba-words {
    color: gray;
    font-family: 微软雅黑;
    font-size: 14px;
    font-weight: bold;
    margin: 10px 20px 0;
    line-height: 23px;
    text-indent: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    div {
        width: 100%;
        background-color: white;
        margin: 0;
        padding: 0;
        text-indent: 0;
        img {
            width: 33.33%;
            height: 100%;;
        }
    }
}
.ba-last {
  letter-spacing: 1px;
  display: table;
  width: 100%;
  font-weight: bold;
  font-family: 微软雅黑;
  font-size: 14px;
  color: #E9BD7A;
  div {
    display: table-cell;
  }
  .ba-left {
    width: 70%;
    text-align: left;
    padding-left: 20px;
    span {
      margin: 0 10px;
    }
  }
  .ba-right {
    text-align: right;
    padding-right: 30px;
  }
}
</style>
